<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>起始页（账单页）</title>
		<link rel="stylesheet" type="text/css" href="./css/api.css" />
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<style type="text/css">
			html, body {
				height: 100%;
			}
			header {
			}
			.top-nav-select-content {
			}
			.top-nav-select-content .select-content {
				padding: 20px 0 10px;
				display: flex;
				display: -webkit-flex;
				display: -webkit-box;
			}
			.select-content .btn-select-content {
				flex: 1;
				-webkit-box-flex: 1;
			}
			.btn-select-content .btn-select {
				text-align: center;
				height: 30px;
				width: 100px;
				line-height: 30px;
				text-align: center;
				color: #FFFFFF;
				font-size: 16px;
			}
			.btn-select-content .btn-select.active {
				border-radius: 15px;
				background-color: #fff;
				color: #FF9F00;
			}
			.indicator-content {
				height: 15px;
				display: flex;
				display: -webkit-flex;
				display: -webkit-box;
			}
			.indicator-content	.indicator {
				flex: 1;
				-webkit-box-flex: 1;
				width: 30px;
				height: 15px;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 30px 15px;
			}
			.indicator-content	.indicator.active {
				background-image: url(./image/bg_indicator.png);
			}
		</style>
	</head>
	<body>
		<header class="top-header">
			<div class="top-nav-content flex-between-center">
				<div class="flex-start-center">
					<div id="back" class="top-nav-left icon-arrow-left"></div>
				</div>
				<div>
					账单
				</div>
				<div class="flex-start-center">
					<div id="btn-confirm" class="top-nav-right"></div>
				</div>
			</div>
			<div class="top-nav-select-content">
				<div class="select-content">
					<div class="btn-select-content flex-center">
						<div class="btn-select active">
							上网明细
						</div>
					</div>
					<div class="btn-select-content flex-center">
						<div class="btn-select">
							充值明细
						</div>
					</div>
				</div>
				<div class="indicator-content">
					<div class="indicator active"></div>
					<div class="indicator"></div>
				</div>
			</div>
		</header>
	</body>
	<script type="text/javascript" src="./script/api.js"></script>
	<script type="text/javascript">
		var mUrl = 'http://123.207.110.98:8080/wifi/TransferServlet';
		var mUserid = '10392';
		var mApptoken = 'f6e3a3d29357917c7e446ac09e949e47';
		//按钮dom对象集合
		var mBtns;
		//指示器dom对象集合
		var mIndicators
		//顶部导航栏dom对象
		var mHeader;
		//手机系统
		var mPhoneSystem;
		apiready = function() {
			$api.fixStatusBar($api.dom('header'));
			initView();
			initData();
			//默认打开第一页（上网明细）
			openFrame(0, mHeader);
		};
		function initView() {
			var back = document.getElementById('back');
			mHeader = document.getElementsByTagName('header')[0];
			mBtns = document.getElementsByClassName('btn-select');
			mIndicators = document.getElementsByClassName('indicator');
			for (var i = 0; i < mBtns.length; i++) {
				mBtns[i].onclick = function() {
					switchTabMenu(this);
				}
			}
			back.onclick = function() {
				closeThisWgt();
			}
		}

		/**
		 * 接受从app传来的数据
		 */
		function initData() {
			mPhoneSystem = api.systemType;
			//正式环境，打开此调用
			getInitDatas();
		}

		/**
		 * 获取从原生app传过来的数据，并且过滤数据以保证数据的正确性。
		 */
		function getInitDatas() {
			var appdatas;
			if ('android' === mPhoneSystem) {
				appdatas = api.appParam;
			} else if ('ios' === mPhoneSystem) {
				appdatas = api.pageParam;
			} else {
				api.toast({
					msg : '当前只支持ios和android'
				});
				return;
			}
			//将不是JSON格式的数据转换为json，以便之后API调用统一。
			if (!isJson(appdatas)) {
				appdatas = JSON.parse(appdatas);
			}
			try {
				mUrl = appdatas.ip;
				mUserid = appdatas.userid;
				mApptoken = appdatas.token;
				console.log('mUrl=' + mUrl + '   mUserid=' + mUserid + '    mApptoken=' + mApptoken);
			} catch(e) {
				api.toast({
					msg : '数据异常'
				});
				return;
			}
			//传入的数据不能空
			if (mUrl == null || mUserid == null || mApptoken == null) {
				api.toast({
					msg : '数据异常'
				});
				return;
			}
		}

		//判断obj是否为json对象
		function isJson(obj) {
			var isjson = typeof (obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;
			return isjson;
		}

		/**
		 * 关闭当前模块的方法
		 */
		function closeThisWgt() {
			if ('android' === mPhoneSystem) {
				api.closeWidget({
					id : api.appId,
					silent : true
				});
			} else if ('ios' === mPhoneSystem) {
				api.closeWin({
				});
			}
		}

		function switchTabMenu(tag) {
			if (tag.className.indexOf('active') != -1) {
				return;
			}
			var index = 0;
			for (var i = 0; i < mBtns.length; i++) {
				if (tag == mBtns[i]) {
					index = i;
				} else {
					mBtns[i].className = 'btn-select';
					mIndicators[i].className = 'indicator';
				}
			}
			mBtns[index].className = 'btn-select active';
			mIndicators[index].className = 'indicator active';
			openFrame(index, mHeader);
		}

		/**
		 * 打开frame
		 * @param {int} type - 类型，0==上网明细;1==充值明细;
		 * @param {Object} view - 标签的dom对象。
		 */
		function openFrame(type, view) {
			var x = 0;
			var y = view.offsetHeight;
			var w = api.winWidth;
			var h = 'auto';
			var data = {
				'token' : mApptoken,
				'userid' : mUserid,
				'url' : mUrl
			};
			if (type == 0) {
				openNetDetails(x, y, w, h, data);
			} else {
				openPayDetails(x, y, w, h, data);
			}
		}

		/**
		 * 打开上网详情的页面
		 */
		function openNetDetails(x, y, w, h, data) {
			api.openFrame({
				name : 'net_details_frame',
				url : './html/net_details_frame.html',
				rect : {
					x : x,
					y : y,
					w : w,
					h : h
				},
				pageParam : data
			});
		}

		/**
		 * 打开充值详情的页面
		 */
		function openPayDetails(x, y, w, h, data) {
			api.openFrame({
				name : 'pay_details_frame',
				url : './html/pay_details_frame.html',
				rect : {
					x : x,
					y : y,
					w : w,
					h : h
				},
				pageParam : data
			});
		}
	</script>
</html>